import pageStyles from '@/common/pageLayout.less';
import { Table, Form, Row, Col, Button, Input } from 'antd';
import { useEffect, useMemo } from 'react';
import { getHomeTableColumns, jumpRoutes } from '../mconfig';
import { getKeyRouter, onMouseOutBtn } from '@/utils';
import Cls from 'classnames';
import { commonPageSizeOptions, showTotalInfo } from '@/common/constVariable';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { TableHomeAPI } from '../common/type';
import '../common/styles.less';
import { usePageRouterPayload } from '@/layouts/UserLayout/MyHooks';
import { history } from 'umi';
import { DatePicker } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';
const RangePicker: any = DatePicker.RangePicker;

/** 待办 已办 表格组件 */
export const IntentTableBody: React.FC<TableHomeAPI.ITableBody> = ({
  tabPaneKey,
  listData,
  taskPushPagination,
  styleFixCls,
  searchForm,
  isTaskView,
  reloadListData,
}) => {
  /** 点击 点击 标题 跳转详情页面 方法 */
  const onOptClick: TableHomeAPI.IOperationClick = {
    onView: (resObj) => {
      onHandleSkip(resObj);
    },
  };

  /** 返回表格配置 */
  const columnsMemo = useMemo(() => {
    return getHomeTableColumns(tabPaneKey == '0' ? true : false, onOptClick, isTaskView);
  }, [tabPaneKey]);

  // 分页页数 和数据条数改变
  const handlePaginationChange = (page: number, pageSize: number) => {
    let params = {
      ...taskPushPagination,
      current: page,
      pageSize: pageSize,
      isRemark: Number(tabPaneKey),
    };
    reloadListData(params);
  };

  /** 点击 标题 跳转详情页面  */
  const onHandleSkip = (resObj: any) => {
    let slicePcUrl = usePageRouterPayload(resObj?.pcUrl?.split('state=')[1]);
    const payload = {
      ...slicePcUrl,
    };
    jumpRoutes(payload, history?.location.pathname);
  };

  return (
    <div className="commonTabsBodyDom" style={{ padding: '5px 0px' }}>
      {isTaskView && (
        <div className={`${styleFixCls}-extraSearch`} style={{ padding: '15px' }}>
          <Form form={searchForm}>
            <Row gutter={[8, 8]}>
              <Col span={4}>
                <Form.Item name="subject">
                  <Input placeholder="标题" allowClear />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item name="defName">
                  <Input placeholder="类型" allowClear />
                </Form.Item>
              </Col>
              {tabPaneKey == '0' && (
                <>
                  <Col span={4}>
                    <Form.Item name="currentStage">
                      <Input placeholder="当前环节" allowClear />
                    </Form.Item>
                  </Col>
                  <Col span={6}>
                    <Form.Item name="createDateTime">
                      <RangePicker
                        locale={locale}
                        style={{ width: '100%' }}
                        placeholder={['开始时间', '结束时间']}
                        ranges={{
                          今天: [moment(), moment()],
                          本周: [moment().startOf('week'), moment().endOf('week')],
                          本月: [moment().startOf('month'), moment().endOf('month')],
                          本年: [moment().startOf('year'), moment().endOf('year')],
                        }}
                      />
                    </Form.Item>
                  </Col>
                </>
              )}
              {tabPaneKey == '2' && (
                <>
                  <Col span={6}>
                    <Form.Item name="endTime">
                      {/* <Input placeholder="办理时间" allowClear /> */}
                      <RangePicker
                        locale={locale}
                        style={{ width: '100%' }}
                        placeholder={['办理开始时间', '办理结束时间']}
                        ranges={{
                          今天: [moment(), moment()],
                          本周: [moment().startOf('week'), moment().endOf('week')],
                          本月: [moment().startOf('month'), moment().endOf('month')],
                          本年: [moment().startOf('year'), moment().endOf('year')],
                        }}
                      />
                    </Form.Item>
                  </Col>
                </>
              )}
              <Col span={tabPaneKey == '0' ? 6 : 10} style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Button
                  type="primary"
                  icon={<SearchOutlined />}
                  onClick={() => {
                    const searchFormValue = searchForm?.getFieldsValue();
                    const params: Record<string, any> = {
                      ...searchFormValue,
                      nodeName: searchFormValue?.currentStage,
                      ...taskPushPagination,
                      isRemark: Number(tabPaneKey),
                    };
                    delete params.currentStage;
                    reloadListData(params);
                  }}
                >
                  查询
                </Button>
                &nbsp;
                <Button
                  icon={<ReloadOutlined />}
                  onMouseOut={onMouseOutBtn}
                  onClick={() => {
                    searchForm?.resetFields();
                    const params: Record<string, any> = {
                      ...searchForm?.getFieldsValue(),
                      page: 1,
                      pageSize: 10,
                      isRemark: Number(tabPaneKey),
                    };
                    delete params.currentStage;
                    reloadListData(params);
                  }}
                >
                  重置
                </Button>
              </Col>
            </Row>
          </Form>
        </div>
      )}
      <div className={Cls(pageStyles['listTable-zIndexStyle'], pageStyles['listTable-notBorder'])} style={{ height: isTaskView ? '92%' : '100%' }}>
        <Table
          size="small"
          bordered={true}
          columns={columnsMemo}
          scroll={{ x: '99vh', y: '100%' }}
          dataSource={listData}
          rowKey={(res: any) => res?.id || getKeyRouter()}
          pagination={
            isTaskView
              ? {
                  showQuickJumper: true,
                  showSizeChanger: true,
                  pageSizeOptions: commonPageSizeOptions,
                  showTotal: showTotalInfo,
                  onChange: handlePaginationChange,
                  pageSize: taskPushPagination?.pageSize,
                  current: taskPushPagination?.current,
                  total: taskPushPagination?.total,
                }
              : false
          }
        />
      </div>
    </div>
  );
};
